Le TP présente une interface homme machine particulière : un agent de dialogue. Il permet via une librairie de créer des dialogues scriptés pouvant inclure du contenu HTML et une mise en forme CSS. Les consignes sont simples : réaliser un dialogue interactif en utilisant la librairie. Il faudra pour celà se familiariser avec sa syntaxe en s'inspirant de dialogues pré-existants.
Il sera nécessaire de connaître le HTML pour manipuler aisément un langage balisé, et le positionnement en CSS afin de mettre en forme les diapos.
Peu de connaissances en programmation sont nécessaires. Les notions de variables, de tests et de boucles peuvent être introduites de manière naturelle par la nécessité de réaliser un dialogue interactif.
Le TP est également l'occasion de se familiariser avec les structures de données arborescentes.
| Contenus | Capacités attendues |
|---|---|
| Interfaces Homme Machine | Réaliser par programmation une IHM répondant à un cahier des charges donné. |
| Modalités de l’interaction entre l’homme et la machine | Identifier les différents composants graphiques permettant d’interagir avec une application Web. |
| Constructions élémentaires | Mettre en évidence un corpus de constructions élémentaires |
| Diversité et unité des langages de programmation | Repérer, dans un nouveau langage de programmation,les traits communs et les traits particuliers à ce langage |
| Utilisation de bibliothèques | Utiliser la documentation d’une bibliothèque. |
| Arbres: structures hiérarchiques. | Identifier des situations nécessitant une structure de données arborescente (terminale). |
Le TP étant organisé sous la forme d'un mini-projet, une courte introduction peut être l'amorce de la séquence pour définir les termes clés (XML, structure arborescente, noeuds, attributs, agent de dialogue, librairie) et réunir quelques exemples autour d'une discussion avec les élèves.
On peut passer assez vite sur les machines. La fiche d'activité commence par un dialogue avec un agent interactif qui propose de faire un "tour de mentalisme". Il s'agit bien sûr d'un dialogue entièrement scripté. Les élèves devront s'en rendre compte par eux même. L'introduction aux notions peut éventuellement être faite à la suite de ce premier contact.
Après lecture de l'énoncé et des éléments à réaliser du cahier des charges, il faut mettre en place l'environnement de travail : effectuer une copie du dialogue scripté et édition à l'aide d'un éditeur tel que notepad++. Activer, si ça n'est pas le cas, la coloration syntaxique pour détecter d'éventuelles erreurs de balisage.
Faire vérifier la bonne structure du dialogue à l'aide d'un parser XML. Dans notepad++, utiliser Compléments, XML Tools, Check XML Syntax Now
Le choix est laissé aux élèves de suivre la présentation de la librairie sous la forme d'un dialogue scripté ou directement par édition et modification des fichiers à télécharger.
Insister sur la structure d'arbre et encourager les élèves à réaliser un schéma de leur dialogue "à la main".
Les élèves peuvent travailler seuls ou en binômes.